<template>
  <edit-dialog
    :centerDialogVisible="visible"
    :tilte="tilte"
    @Cancel="handleCancel"
    :default-button="false"
    :width="width"
  >
    <template #content>地图</template>
    <template #custom>
      <span class="dialog-footer">
        <el-button class="buttonCancel" @click="handleCancel">取消</el-button>
        <el-button class="buttonOk" type="primary" @click="handleOk">下一步</el-button>
        <el-button class="buttonOk" @click="handleOk" plain>跳过</el-button>
      </span>
    </template>
  </edit-dialog>
  <Save :visible="saveDialogVisible" @cancel="cancel" @back="handleBack" @ok="save"></Save>
</template>
<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, computed } from 'vue'
import editDialog from '@/components/editDialog/index.vue'
import Save from './save.vue'
const tilte = ref('新增设施设备')
const saveDialogVisible = ref(false)
const emit = defineEmits(['cancel', 'ok', 'back'])
const width = ref('950px')
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
/**
 * 取消
 */
const handleCancel = () => {
  emit('cancel')
}
const handleOk = () => {
  emit('ok')
  saveDialogVisible.value = true
}

/**
 * 弹窗点击取消
 */
const cancel = () => {
  saveDialogVisible.value = false
}
/**
 * 弹窗点击
 */
const save = () => {
  saveDialogVisible.value = false
}
/**
 * 弹窗返回上一步
 */
const handleBack = () => {
  saveDialogVisible.value = false
  emit('back')
}
</script>
